

import React from 'react'
import {Link} from 'react-router-dom'
import {Icon,Input,Form,Button,Row,Col,message,Select } from 'antd'
import PureRenderMixin from 'react-addons-pure-render-mixin';

import User from 'service/user-service.jsx'
import Safty from 'service/safty-service.jsx'
import MMUtile from 'util/mm.jsx'
const _mm = new MMUtile();
const _user = new User();
const _safty = new Safty();

const FormItem = Form.Item;
const Option = Select.Option;

class VerifyForm extends React.Component{
	constructor(props){
		super(props);
    this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
		this.state = {
			CodeValue:'获取验证码',
			canGetCode:false,
			codenum:120,
			phoneOremail:'phone',
			captcha:'',
			phone:this.props.phone?this.props.phone:'',
			email:this.props.phone?this.props.email:''

		}
		

	}
	componentWillUpdate(){
		this.setState({
			phone:this.props.phone,
			email:this.props.email
		})
	}

	//点击验证码事件
  getHandleCode(rule, value, callback){
    const form = this.props.form;
    const phoneOremail = form.getFieldValue('phoneOremail');
    this.setState({
    	phoneOremail:phoneOremail
    })
    if(this.props.islogin=='yes'){
	    _safty.loginExeSendSMSOrSendEmail({
				type:phoneOremail
			}).then((res)=>{
				if(phoneOremail =='phone'){
	      	message.success('请打开您的手机接收并填写验证码');
				}else{
	      	message.success('请打开您的邮箱接收并填写验证码');
				}
	    },(errMsg)=>{
	      _mm.errorTips(errMsg);
	      return;
	    })
    }else{
	    _safty.exeSendSMSOrSendEmail({
				type:phoneOremail
			}).then((res)=>{
				if(phoneOremail =='phone'){
	      	message.success('请打开您的手机接收并填写验证码');
				}else{
	      	message.success('请打开您的邮箱接收并填写验证码');
				}
	    },(errMsg)=>{
	      _mm.errorTips(errMsg);
	      return;
	    })
    }

  	//如果不重复将倒数120秒在按钮上显示
  	if(this.timer){
        clearTimeout(this.timer);
      	return;
    }
  	this.timer = setInterval(()=>{
  		if(this.state.codenum ===0){
  			//倒数到0，将按钮变为可用
  			this.setState({
					CodeValue:'获取验证码',
					canGetCode:false,
					codenum:120
				})
				clearTimeout(this.timer);
  		}else{
  			//倒数期间，将按钮变为禁用
				this.setState({
					CodeValue:this.state.codenum--+'秒',
					canGetCode:true
				})
  		}

  	},1000);	  	
  }
  
  handleSubmit(e){
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
      	//对比验证码，
      	if(this.props.islogin=='yes'){
					this.props.getIsCodeRight({phoneOremail:this.state.phoneOremail,code:values.captcha});
      	}else{
	      	_safty.verifyPhone({
						code:values.captcha
					}).then((res)=>{
			      //正确传输到父级，并更换弹窗内容
			      this.props.getIsCodeRight({isCodeRight:true,phoneOremail:this.state.phoneOremail,code:values.captcha});
			    },(errMsg)=>{
			      _mm.errorTips(errMsg);
			    })
		    }
		    $("#verifyInput").val("");
		    this.setState({
					CodeValue:'获取验证码',
					canGetCode:false,
					codenum:120
				})
				clearTimeout(this.timer);
			}
		});
  }
  handleChange(e){
  	
  }
	render(){
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    let option;
    if(this.state.email){
    	option =  [<Option key={this.state.phone} value='phone'>手机验证[{this.state.phone}]</Option>,
							  <Option key={this.state.email}  value='email'>邮箱验证[{this.state.email}]</Option>];							  
    }else{
    	option =  [<Option key={this.state.phone}  value='phone'>手机验证[{this.state.phone}]</Option>];							  
    }
		return(
			<div>
				<Form onSubmit={(e)=>{this.handleSubmit(e)}}> 
					{
						this.props.islogin=='yes'
						?
						<p>为保证您的信息安全，请先校验手机或邮箱再进行登录</p>
						:
						<p>为保证您的信息安全，请先校验手机或邮箱再进行操作</p>

					}

	        <FormItem
	          {...formItemLayout}
	          label="验证方式"
	        >
	          {getFieldDecorator('phoneOremail',{
	            initialValue: 'phone'
	          })(
	                <Select  style={{ width: 305 }} onChange={this.handleChange.bind(this)}>
							      {option}
							    </Select>
	              )}
	        </FormItem>
	        <FormItem
	          {...formItemLayout}
	          label="验证码"
	        >
	          <Row gutter={8}>
	            <Col span={12}>
	              {getFieldDecorator('captcha', {
	                rules: [{ required: true, message: '请输入您获取的验证码!' }],
	            		initialValue: this.state.captcha,
	              })(
	                <Input id="verifyInput"  />
	              )}
	            </Col>
	            <Col span={12}>
	              <Button  onClick={this.getHandleCode.bind(this)} disabled={this.state.canGetCode}>{this.state.CodeValue}</Button>
	            </Col>
	          </Row>
	        </FormItem>	       
	        <FormItem {...tailFormItemLayout}>

	          <Button type="primary" htmlType="submit" size="large">提交</Button>
	        </FormItem>
	      </Form>
			</div>
		)
	}
}

const Verify = Form.create()(VerifyForm);
export default Verify;